<template>
  <view class="edit-info">
    <nav-bar class="nav-bar">
      <text slot="left" class="iconfont icon-fanhui" @click="back"></text>
      <view slot="center" class="nav-center">修改{{ info.title }}</view>
    </nav-bar>
    <view class="header">我的{{ info.title }}</view>
    <view class="info-input">
      <textarea
        :value="info.value"
        placeholder="请输入简介"
        @input="input"
        v-if="info.title === '简介'"
        :maxlength="length"
      />
      <input type="text" @input="input" :value="info.value" :maxlength="length" v-else />
      <text
        class="iconfont icon-chahao"
        v-show="valueLength && info.title !== '简介'"
        @click.native="clearValue"
      ></text>
    </view>
    <text class="size">{{ valueLength }}/{{ length }}</text>
    <view class="save"><view class="tagSave" @click="saveInfo">保存</view></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {
        title: '',
        value: ''
      },
      valueLength: 0,
      length: 20
    }
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    clearValue() {
      this.info.value = ''
      this.valueLength = 0
    },
    input(e) {
      this.valueLength = e.target.value.length
      this.info.value = e.target.value
    },
    saveInfo() {
      uni.reLaunch({ url: '/pages/ChangeInfo/ChangeInfo' })
      uni.setStorage({
        key: this.info.title,
        data: this.info.value,
        success() {
          uni.showToast({ title: '修改成功' })
        }
      })
    }
  },
  onLoad(options) {
    if (options.type === '简介') {
      this.length = 60
    }
    this.info.title = options.type
    this.info.value = options.value
    this.valueLength = options.value.length
  }
}
</script>

<style lang="scss" scoped>
.edit-info {
  height: 100vh;
  background: #171827;
  .header {
    font-size: 28rpx;
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 20rpx;
    color: gray;
  }
  .info-input {
    position: relative;
    input,
    textarea {
      padding: 0 20rpx;
      color: gray;
    }
    .icon-chahao {
      background: gray;
      color: black;
      border-radius: 50%;
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translate(0, -50%);
      z-index: 100;
    }
  }
  .size {
    font-size: 24rpx;
    color: gray;
    padding-left: 20rpx;
  }
  .save {
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20rpx;
    .tagSave {
      height: 40rpx;
      width: 120rpx;
      background: #ff4156;
      text-align: center;
      line-height: 40rpx;
      border-radius: 6rpx;
      font-size: 26rpx;
      box-shadow: 0 0 3rpx 3rpx #000;
      color: #fff;
    }
  }
}

.nav-bar {
  color: #fff;
  padding-bottom: 40rpx;
  border-bottom: 1rpx solid gray;
}
.icon-fanhui {
  font-size: 40rpx;
}

::v-deep .left {
  width: 80rpx !important;
}
</style>
